import { Component } from 'react';

import { Group, Boxs, ScrollList, SearchBar, Badge} from 'saltui';
const { HBox, Box } = Boxs;
import AngleRight from 'salt-icon/lib/AngleRight';

import { URLS,nodataIcon } from '../../../app/variables';

import './PageHome.less';
const currentItem = { activeItem: "0", flag: false};


const Item1  =  React.createClass({
  detailsClick: function(event) {
    currentItem.flag = true;
    location.hash='meeting/meetingDetails/'+this.props.applyRecordid + '/approve';
  },
  render:function() {
    return (<div>
        <Group.List lineIndent={60}>
          <div className="dd-t-list-wrap" onClick={this.detailsClick}>
            <HBox vAlign="top">
              <Box className="dd-t-list-text-content" flex={1}>
                <HBox className="dd-t-list-title ">
                  <Box className="t-omit t-MR40">{this.props.applyRecordName}</Box>
                </HBox>
                <div className="dd-t-list-time t-FBAC t-FBH">
                  <i className="iconfont icon-time t-FCc t-MR4" style={{fontSize:14}}></i>
                  <span className="t-list-text t-MR12">{this.props.startDate}~{this.props.endDate}</span>
                </div>
                <div className="dd-t-list-time t-FBAC t-FBH">
                  <i className="iconfont icon-place t-FCc t-MR4" style={{fontSize:14}}></i>
                  <span className="t-list-text t-MR4">{this.props.boardroomName == "" || this.props.boardroomName == null ? "无" : this.props.boardroomName}</span>
                </div>
              </Box>
              <Box>
                <AngleRight width={20} fill="#ccc" className="demo-t-list-arrow" />
              </Box>
            </HBox>
        </div>
      </Group.List></div>)
    }
  });

const Item2  =  React.createClass({
  detailsClick: function(event) {
    currentItem.flag = true;
    var url ='meeting/meetingDetails/'+this.props.applyRecordid + '/notice';
    location.hash = url;
  },
  render:function() {
    return (<div>
      <Group.List lineIndent={60}>
        <div className="dd-t-list-wrap" onClick={this.detailsClick}>
          <HBox vAlign="center">
            <HBox flex={1}  className="t-FBAC">
              <Box className="dd-t-list-text-content" flex={1}>
                <div className="t-list-title t-LH1_4">
                  <HBox vAlign="center">
                    <Box flex={1} className="t-omit t-PR8">
                      <Badge className={this.props.isCycle==1 && this.props.cycleType==0?'':'t-DN'} text={'日例会'} style={{marginRight: 7,background: '#38adff',height:18,lineHeight:'18px',borderRadius:'10px',padding:'0 8px'}}/>
                      <Badge className={this.props.isCycle==1 && this.props.cycleType==1?'':'t-DN'} text={'周例会'} style={{marginRight: 7,background: '#38adff',height:18,lineHeight:'18px',borderRadius:'10px',padding:'0 8px'}}/>
                      <Badge className={this.props.isCycle==1 && this.props.cycleType==2?'':'t-DN'} text={'月例会'} style={{marginRight: 7,background: '#38adff',height:18,lineHeight:'18px',borderRadius:'10px',padding:'0 8px'}}/>
                      {this.props.applyRecordName}
                    </Box>
                    {/* <Box className={this.props.status==0?'t-badge-o t-FR':'t-DN'}>NEW</Box> */}
                    <Box className={this.props.status==2?'t-FCddfontblue-60':'t-DN'}>已确认参会</Box>
                    <Box className={this.props.status==4?'t-FCddfontblue-60':'t-DN'}>{'已转交至' + this.props.receiveUserName}</Box>
                    <Box className={this.props.status==3?'t-FCddfontblue-60':'t-DN'}>已请假</Box>
                  </HBox>
                </div>
                <div className="t-list-text t-FBAC t-FBH">
                  <i className="iconfont icon-time t-FCc t-MR4" style={{fontSize:14}}></i>
                  <span className="t-list-text t-MR12">{this.props.startDate}~{this.props.endDate}</span>
                </div>
                <div className="dd-t-list-time t-FBAC t-FBH">
                  <i className="iconfont icon-place t-FCc t-MR4" style={{fontSize:14}}></i>
                  <span className="t-list-text t-MR4">{this.props.boardroomName == "" || this.props.boardroomName == null ? "无" : this.props.boardroomName}</span>
                </div>
              </Box>
            </HBox>
            {/* <Box>
              <AngleRight width={20} fill="#ccc" className="demo-t-list-arrow" />
            </Box> */}
          </HBox>
        </div>
      </Group.List></div>)
    }
  });


export default class PageHome extends Component {


 constructor(props) {
    super(props);

    //关闭加载页的遮罩效果
    $(".loading-containter").hide();
    //禁用ios弹性事件
    dd.ui.webViewBounce.disable();

   var winHeight = getScrollHigh(0, 0, 0);

    var activeItem = this.props.params.activeItem;
    /*if(!currentItem.flag){
      if(activeItem==undefined||activeItem==""||activeItem==null){
        activeItem = '0';
      }else{
        currentItem.activeItem = activeItem;
      }
    }else{
      activeItem = currentItem.activeItem;
    }*/
    currentItem.flag = false;
    this.state = {
      userId: '1',
      search:'',
      activeTabIndex:'0',
      activeIndex: 0,
      n: 1,
      list: [0, 1, 2, 3, 4, 5, 6],
      winHeight:winHeight,
      activeItem: activeItem,

    };

    let t = this;
    let userId = document.getElementById("userHiddenId").value;
    var isHelpNew = 1;
    dd.util.domainStorage.getItem({ //帮助按钮
         name:'meeting_helpNew_'+userId , // 存储信息的key值
         onSuccess : function(info) {
              var helpNew = info.value;
              if( typeof(helpNew) == 'undefined' || helpNew == '' ){
                isHelpNew = 2;
              }
              //初始化按钮
              t.initButton(isHelpNew);
         },
         onFail : function(err) {
              //alert(JSON.stringify(err));
         }
      });
  }

  componentDidMount (){
    var page_title = "会议";
    $("title").text(page_title);
    var thirdMenuType = getLoginUserInfo().thirdMenuType;
    if(thirdMenuType == 'DING'){
      dd.biz.navigation.setTitle({
        title : page_title,//控制标题文本，空字符串表示显示默认文本
        onSuccess : function(result) {},
        onFail : function(err) {}
      });
    }else if(thirdMenuType =='MH'){
      !!emp&&emp.window.setTitle({
        title: {
            text: page_title,
            icon: '',
            actionmenu: {}
        },
      });
    }
    searchBarLimit(20);
  }

  componentWillUnmount(){

  }

  //初始化按钮
  initButton(isHelpNew){
    //设置帮助
    /*dd.biz.navigation.setIcon({
        showIcon : true,//是否显示icon
        iconIndex : isHelpNew,//显示的iconIndex,如上图
        onSuccess : function(result) {
            location.hash='help/help_index';
        },
        onFail : function(err) {
        //jsapi调用失败将会回调此函数
        }
    });*/
  }

  handleLink() {
    location.hash = 'add';
  }

  handleClickImg(event, imgUrl) {
    console.log(event);
    console.log(imgUrl);
  }

  handleDelete(event, dataItem) {
    console.log(event);
    console.log(dataItem);
  }

  add() {
    const t = this;
    t.setState({
      n: t.state.n + 1,
    });
  }

  // 请求参数
  beforeFetch(data,from){
    if (from.title == undefined) {
      data.condition = this.state.search;
    } else {
      data.condition = from.title;
    }
    
    data.userId = this.state.userId;
    return data;

  }

  // 首页返回数据参数
  processData(data){
    return data;
  }

   //搜索
   onSearch(type,keyword) {
      this.setState({
        search:keyword
      });
      if (type == 0) {
        this.refs.meeting_approve_ref.fetchData({title:keyword});
      }
   }

  //搜索值变化
  searchChange(type,keyword){
    if(keyword == ''){
      this.setState({
        search:''
      });
      if (type == 0) {
        this.refs.meeting_approve_ref.fetchData({title:''});
      }
    }
  }

  //退出
  onExit(type,keyword){
    this.setState({
      search:''
    });
    if (type == 0) {
      this.refs.meeting_approve_ref.fetchData({title:''});
    }
  }

  // 刷新
   refreshList(type){
      if (type == '0') {
        this.refs.meeting_approve_ref.fetchData({title:this.state.search});
      }
   }

   handleChange(obj) {
    this.setState({
      activeItem: obj.active,
      search: ''
    });
    currentItem.activeItem = obj.active;
  }

  render() {

    const tabBarStyle = {};
    const t = this;
    const props = {
      locale: 'zh_CN',
      instantSearch: true,
      hasHistory: true,
      searchDelay: 450,
      onEnter: () => { console.log('enter'); },
      onExit: () => { console.log('exit'); },
      onChange: (value) => {
        console.log(`Typing>>${value}`);
      },
      onSearch: (value) => {
        console.info(`Do search>>${value}`);
        if (t.refs.list) {
          t.refs.list.fetchData({
            keyword: value,
          });
        }
      },
    };

    let listHeight ={height: this.state.winHeight};
    
    return (
      <div className="page-meeting t-PB44">
        <div style={listHeight} className={this.state.activeItem=='0'?'':'t-DN'}>
          <SearchBar hasHistory={false} instantSearch={false} onSearch={this.onSearch.bind(this,0)} ref='approve_search' placeholder='请输入会议名称' onExit={this.onExit.bind(this,0)}>
          </SearchBar>
          <ScrollList
            className="page-list"
            url={URLS.approval}
            dataType="json"
            pageSize={10}
            beforeFetch={this.beforeFetch.bind(this)}
            processData={(data) => data}
            ref = 'meeting_approve_ref'
            noDataImage={nodataIcon}
            currentPageKey="page">
            <Item1 type="0" onRefresh={this.refreshList.bind(this,'0')}/>
          </ScrollList>
        </div>
        <div style={listHeight} className={this.state.activeItem!='0'?'':'t-DN'}>
          <ScrollList
            className="page-list"
            url={URLS.attendNoticeInfoSetList}
            dataType="json"
            pageSize={10}
            beforeFetch={(data) => data}
            processData={(data) => data}
            ref = 'cms_infolist_ref'
            noDataImage={nodataIcon}
            currentPageKey="page">
            <Item2 type="0" />
          </ScrollList>
          {/*<Tab activeKey={this.state.activeItem} onChange={this.handleChange.bind(this)}>
            <Tab.Item title="会议审批" key="0">
              <SearchBar hasHistory={false} instantSearch={false} onSearch={this.onSearch.bind(this,0)} ref='approve_search' placeholder='请输入会议名称' onExit={this.onExit.bind(this,0)}>
              </SearchBar>
              <div style={listHeight}>
                <ScrollList
                  className="page-list"
                  url={URLS.approval}
                  dataType="json"
                  pageSize={10}
                  beforeFetch={this.beforeFetch.bind(this)}
                  processData={(data) => data}
                  ref = 'meeting_approve_ref'
                  noDataImage={nodataIcon}
                  currentPageKey="page">
                  <Item1 type="0" onRefresh={this.refreshList.bind(this,'0')}/>
                </ScrollList>
              </div>
            </Tab.Item>
            <Tab.Item title="会议通知" key="1">
              <div style={listHeight}>
                <ScrollList
                  className="page-list"
                  url={URLS.attendNoticeInfoSetList}
                  dataType="json"
                  pageSize={10}
                  beforeFetch={(data) => data}
                  processData={(data) => data}
                  ref = 'cms_infolist_ref'
                  noDataImage={nodataIcon}
                  currentPageKey="page">
                  <Item2 type="0" />
                </ScrollList>
              </div>
            </Tab.Item>
          </Tab>*/}
        </div>
      </div>
    );
  }
}


